<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            background: rebeccapurple;
        }
    </style>
</head>
<body>

<canvas id="canvas"></canvas>

<script>
    const canvas = document.getElementById('canvas')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight

    //画笔
    const ctx = canvas.getContext('2d')
    ctx.lineWidth = 10

    //画直线
    ctx.beginPath()
    ctx.moveTo(50, 50)
    ctx.lineTo(400, 50)
    ctx.lineTo(400, 200)
    ctx.closePath()
    ctx.stroke()

    //画圆弧
    ctx.beginPath()
    //x，y，半径，开始弧度，结束弧度，方向默认顺时针
    ctx.arc(300, 300, 200, 0, Math.PI * 3 / 2)
    // 防止两个圆弧连接，设置第二个圆弧的新起点
    ctx.moveTo(700, 300)
    ctx.arc(700, 300, 200, 0, Math.PI * 3 / 2)
    ctx.stroke()

    //画切线圆弧
    // 辅助线
    // ctx.beginPath()
    // ctx.moveTo(700, 50)
    // ctx.lineTo(1200, 50)
    // ctx.lineTo(1200, 200)
    // ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(700, 50)
    ctx.arcTo(1200, 50, 1200, 200, 100)
    ctx.stroke()

    //二次贝塞尔曲线
    ctx.beginPath()
    ctx.moveTo(700, 50)
    ctx.quadraticCurveTo(
        1200, 50,
        1200, 200,
    )
    ctx.stroke()

    //三次贝塞尔曲线，要基于辅助线画比较好理解
    ctx.beginPath()
    ctx.moveTo(700, 200)
    ctx.bezierCurveTo(
        700, 200,
        900, 50,
        1200, 200,
    )
    ctx.stroke()

    //画矩形路径
    ctx.fillStyle = 'rgba(255,0,0,0.5)' //填充颜色
    ctx.beginPath()
    ctx.rect(1000, 450, 100, 100)
    ctx.fill() // 填充

    ctx.beginPath()
    ctx.rect(1050, 500, 100, 100)
    ctx.fill() // 填充
    //设置描边颜色
    ctx.strokeStyle = 'green'
    ctx.stroke()


</script>
</body>
</html>
